<template>
  <a-card :bordered="false" size="small">
    <a-row :gutter="8">
      <a-col :sm="24" :md="5">
        <div style="max-height: 100vh;overflow-y: auto;padding-top: 3px;">
          <lz-tree
            ref="lzTree"
            :replaceFields="{
              key: 'id',
              title: 'title',
              children: 'children'
            }"
            @click="nodeClick"
          ></lz-tree>
        </div>
      </a-col>
      <a-col :sm="24" :md="19">
        <lz-search ref="searchBar" :items="items" @search="search"></lz-search>
        <lz-table ref="myTable">
          <div slot="tools">
            <a-button icon="plus" @click="showAdd" type="primary">添加</a-button>
          </div>
        </lz-table>
        <edit ref="edit" @search="init"></edit>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import items from './items'
import edit from './edit'
import { del, getTree } from '@/api/sys/menu.js'
export default {
  components: { edit },
  name: 'Index',
  data () {
    return {
      items: items,
      p: {
        id: 0,
        title: null,
        menuType: null
      }
    }
  },
  created () {
  },
  mounted () {
    this.initTree()
    this.$refs.myTable.init(
      {
        url: globalConf.baseURL + '/admin/sys/menu/getList', // 请求url
        method: 'get', // 请求方式（*）
        pagination: true, // 是否显示分页（*）
        queryParams: {}, // 默认参数
        pageNumber: 1, // 初始化加载第一页，默认第一页
        pageSize: 10, // 每页的记录行数（*）
        pageList: ['10', '25', '50', '100'], // 可供选择的每页的行数（*）
        showColumns: true, // 是否显示所有的列
        showRefresh: true, // 是否显示刷新按钮
        changeSize: true, // 允许改变列大小
        showCheckBox: false, // 显示复选框
        showIndex: false, // 显示序号
        height: 500, // 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        columns: [
          {
            field: 'seq',
            title: '顺序号',
            sorter: 'true',
            align: 'right',
            width: 120
          },
          {
            field: 'title',
            title: '名称',
            sorter: 'true',
            align: 'left',
            width: 150
          },
          {
            field: 'menuType',
            title: '类型',
            sorter: 'true',
            align: 'center',
            width: 80,
            formatter: {
              type: 'text',
              format: row => {
                if (row.menuType === 1) {
                  return {
                    value: '目录'
                  }
                } else if (row.menuType === 2) {
                  return {
                    value: '菜单'
                  }
                } else if (row.menuType === 3) {
                  return {
                    value: '按钮'
                  }
                } else {
                  return {
                    value: '-'
                  }
                }
              }
            }
          },
          {
            field: 'path',
            title: '路由/权限',
            align: 'left',
            width: 150,
            formatter: {
              type: 'text',
              format: row => {
                if (row.path) {
                  return {
                    value: row.path
                  }
                } else if (row.authCode) {
                  return {
                    value: row.authCode
                  }
                } else {
                  return {
                    value: '-'
                  }
                }
              }
            }
          }
        ],
        operate: {
          width: 200,
          items: [
            {
              label: '编辑',
              color: 'primary',
              event: row => {
                if (this.p.lv === 2) {
                  this.$message.warning('按钮下不可以新增')
                  return
                }
                this.$refs.edit.showModal(row.id, this.p)
              }
            },
            {
              label: '删除',
              color: 'danger',
              event: row => {
                this.$confirm({
                  title: '确认删除？',
                  content: '确认删除后会同时清除引用且数据无法恢复!',
                  onOk: () => {
                    del({ id: row.id }).then(res => {
                      if (res.code === 1) {
                        this.$message.success('删除成功')
                        this.initTree()
                        this.search()
                      }
                    })
                  }
                })
              }
            }
          ]
        }
      },
      () => {
        this.search()
      }
    )
  },
  methods: {
    init (param) {
      this.initTree()
      this.search(param)
    },
    // 左侧树初始化
    initTree () {
      // 模拟请求数据， 实际使用中，通过接口请求数据
      getTree({}).then(res => {
        const testData = res.data || []
        this.$refs.lzTree.init(testData)
      })
    },
    // 左侧树点击
    nodeClick (param) {
      if (param) {
        if (param.menuType === '3') {
          this.$message.warning('权限类型下不可以新增')
          return
        }
        this.p = {
          id: param.id,
          title: param.title,
          menuType: param.menuType
        }
      } else {
        this.p = {
          id: 0,
          title: null,
          menuType: null
        }
      }

      this.search()
    },
    search (param) {
      param = param || {}
      param.pid = this.p.id
      this.$refs.myTable.search(param || {})
    },
    showAdd () {
      this.$refs.edit.showModal(null, this.p)
    }
  }
}
</script>

<style scoped></style>
